<template>
	<view>
		<view class="top-tabber-wrapper">
			<view class="item" :class="{'check': check_tabber_type == item.type}" v-for="(item, index) in top_tabber" :key="index"
			 @click="cliTabberItem(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in order_list" :key="index" @click="$db._NavTo('order-detail-page',{order_id: item.order_id})">
				<view class="goods-info">
					<image :src="item.detail_cover" mode=""></image>
					<view class="info">
						<text class="name">{{item.name}}</text>
						<view class="price-and-type">
							<text class="price">￥{{item.price}}</text>
							<text class="type" v-if="item.pay_status === 1">待付款</text>
							<text class="type" v-else-if="item.pay_status === 2">进行中</text>
							<text class="type" v-else-if="item.pay_status === 3">待评价</text>
							<text class="type" v-else-if="item.pay_status === 4">已完成</text>
							<text class="type" v-else-if="item.pay_status === 5">已取消</text>
						</view>
					</view>
				</view>
				<view class="time-and-btn">
					<text class="time">{{item.ctime}}</text>
					<text class="btn" v-if="item.pay_status === 1" @click.stop="wxPay(item.order_id)">去付款</text>
					<text class="btn" v-else-if="item.pay_status === 3" @click.stop="$db._NavTo('comment', {order_id: item.order_id, type: 'plan'})">去评价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top_tabber: [{
						name: '全部',
						type: '0'
					},
					{
						name: '待付款',
						type: '1'
					},
					{
						name: '进行中',
						type: '2'
					},
					{
						name: '待评价',
						type: '3'
					},
					{
						name: '已完成',
						type: '4'
					}
				],
				check_tabber_type: 0,
				order_list: []
			};
		},
		onLoad(o) {
			if (o.type) {
				this.check_tabber_type = o.type
			}
		},
		onShow() {
			this.getDate();
		},
		methods: {
			getDate: function() {
				this.$api.getAllCycleOrder({
						pay_status: this.check_tabber_type
					})
					.then(res => {
						window.scrollTo(0, 0);
						this.order_list = res.data
					})
			},
			cliTabberItem: function(item) {
				// tabber切换
				this.check_tabber_type = item.type;
				this.getDate();
			},
			wxPay: function(order_id) {
				// 支付
				this.$api.wxPay({
						ids: order_id
					})
					.then(ret => {
						if ('data' in ret && ret.data === 10059) {
							this.$db._NavTo('submited-order-page', {
								order_id: res.data.order_id
							}, this.$db.navToMethod[1]);
						} else {
							location.href = ret.data.url
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 100rpx;
		background: #FFFFFF;
		overflow: hidden;
	}

	.top-tabber-wrapper {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		padding: 0 38rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;

		.item {
			width: 100rpx;
			height: 100rpx;
			flex: 0 0 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-bottom: 2rpx solid #fff;

			text {
				font-size: 28rpx;
				color: #5C5C5B;
			}

			&.check {
				border-bottom: 2rpx solid #C19101;

				text {
					color: rgba(193, 145, 1, 1);
				}
			}
		}
	}

	.order-list {
		position: relative;
		z-index: 2;

		.order-item {
			padding: 34rpx 20rpx;
			margin: 0 28rpx;
			border-bottom: 2px solid rgba(242, 242, 242, 1);

			.goods-info {
				padding-bottom: 40rpx;
				display: flex;

				image {
					flex: 0 0 138rpx;
					width: 138rpx;
					height: 138rpx;
					border-radius: 10rpx;
				}

				.info {
					flex: 0 0 470rpx;
					padding-left: 22rpx;
					display: flex;
					flex-flow: column;

					.name {
						font-size: 32rpx;
						color: rgba(37, 37, 37, 1);
					}

					.price-and-type {
						margin-top: auto;
						display: flex;

						.price {
							font-size: 28rpx;
							color: #252525;
						}

						.type {
							margin-left: auto;
							font-size: 22rpx;
							color: #C19101;
						}
					}
				}
			}

			.time-and-btn {
				display: flex;
				align-items: center;

				.time {
					font-size: 22rpx;
					color: #313130;
				}

				.btn {
					margin-left: auto;
					margin-right: 20rpx;
					padding: 10rpx 30rpx;
					font-size: 22rpx;
					color: #494949;
					border: 1rpx solid rgba(157, 157, 157, 1);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
